<template>
	<view class="order-box">
		<view class="header-nav">
			<!-- <view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor"
					@clickItem="onClickItem" />
			</view> -->
		</view>
		<view class="content" v-if="ordersList.length!=0">
			<block v-for="item in ordersList" :key="item.id">
				<view class="orderList">
					<view class="order-content">
						<view class="content-time">下单时间：{{item.createTime}}</view>
						<view class="content-btm">
							<view class="content-info">
								<text class="food-name">{{item.goods[0].goodsName}}</text>
								<text class="food-describe" s>等4件商品</text>
								<text class="food-price">￥{{item.payMoney}}</text>
							</view>
							<view class="content-infoR">
								<view class="order-detail" @click="toOrderDetail(item)">
									查看详情</view>
								<view v-if="item.status=='1'" class="taken">已取餐</view>
								<view v-else class="notaken">
									未取餐
								</view>
							</view>
							<!-- <view else class="notaken">未取餐</view> -->
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="empty" v-else>
			<image src="../../static/imgs/empty.png" mode=""></image>
			<view class="text">
				您还没有订单，快去选一杯喜欢的饮品吧~
			</view>
			<button class="btn-to-order" type="warn" size="mini">去喝一杯</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['全部'],
				current: 0,
				colorIndex: 0,
				activeColor: '#dd524d',
				styleType: 'button',
				ordersList: [],
				currentPage: 1,
				size: 10,
				isLoading: false,
				total: 50
			};
		},
		created() {
			this.getOrders()
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			async getOrders() {

				if (this.isLoading) return
				this.isLoading = true
				let {
					currentPage,
					size
				} = this
				let phone = uni.getStorageSync("userInfo").phone
				if (!phone) return
				uni.showLoading({
					title: "数据加载中",
				})
				let res = await uni.$http.order.reqGetOrdersByPhone(currentPage, size, phone)
				if (res.code == "200") {
					// this.ordersList = res.data.records
					this.ordersList = [...this.ordersList, ...res.data.records]
					this.total = res.data.total
					this.isLoading = false
					uni.hideLoading()
				} else {
					uni.hideLoading()
					uni.showToast({
						title: "数据加载失败",
						icon: 'error'
					})
				}
			},
			toOrderDetail(item) {
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: "/packges/orderDetail/orderDetail?data=" + data
				})
			},


		},
		onReachBottom() {
			//分页已经加载全部数据
			if (this.currentPage * this.size >= this.total) {
				return uni.showToast({
					title: '已无更多数据'
				})
			}
			this.currentPage += 1
			this.getOrders()
		}
	}
</script>

<style lang="less">
	.content {
		background-color: #fff;
	}

	.order-box {
		background-color: #f5f5f5;
	}

	.orderList {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.order-content {
		padding: 40rpx 0;
		align-items: center;
		border-bottom: 1rpx solid #ececec;
	}

	.order-info {
		font-size: 22rpx;
		color: #999;
		margin-left: 30rpx;
		height: 36rpx;
		line-height: 36rpx;
	}

	.order-detail {
		text-align: center;
		color: #ff9000;
		font-size: 24rpx;
		padding: 5rpx 10rpx;
		background: #fff;
		border: 1px solid #ff9000;
	}

	/* 是否取餐样式 */
	.taken {
		font-size: 30rpx;
		background: #d2d2d2;
		color: #999;
		padding: 10rpx;
		margin-left: 20rpx;
	}

	.notaken {
		font-size: 30rpx;
		background: #ffd161;
		color: #fff;
		padding: 10rpx;
		margin-left: 20rpx;
	}

	.content-time {
		font-size: 26rpx;
		color: #999;
	}

	.content-info {
		color: #666;
		font-size: 28rpx;
	}

	.food-name {
		font-weight: 600;
		font-size: 30rpx;
	}

	.content-btm {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.food-describe {
		color: #999;
		padding-left: 10rpx;
	}

	.food-price {
		font-size: 22rpx;
		padding-left: 20rpx;
	}

	.content-infoR {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center
	}

	.bottom {
		text-align: center;
		color: #999
	}

	.empty {
		height: 550px;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;

		image {
			margin-top: 50px;
			width: 200px;
			height: 200px;
		}

		.text {
			font-size: 12px;
			color: #b3b3b3;
			margin-top: 35px;
		}

		.btn-to-order {
			margin-top: 20px;
			width: 140px;
			height: 50px;
			text-align: center;
			line-height: 50px;
			font-size: 14px;
		}
	}

	// }
</style>
